<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<head>
    <script type="text/javascript" charset="utf-8" src="jquery-1.8.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="layui/layui.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <title>成都李家岩水库</title>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        /*.myalex{
            width: 350px;
            margin-left: 30%;
            margin-top: 20%;
            font-size: 30px;
        }*/
        .alex-fontsize{
            font-size: 2em;
        }
        .juzhong{
            text-align: center;
        }
        .alex-button{
            height: 60px;
            line-height: 60px;
            font-size: 1em;
        }
        .alex-display-block{
            display: none;
        }
        body{
            background-color: #f4ecff;
        }
    </style>
</head>

<body>

<div class="container" style="padding: 20px;">
    <div class="layui-row juzhong alex-fontsize" style="margin-top: 200px;padding-bottom: 10px;">
        <button id="alex-copy-data" type="button" class="layui-btn-lg layui-btn alex-now-datacopy alex-button">复  制</button>
    </div>
    <div class="layui-row juzhong alex-fontsize" style="margin-top: 60px;padding-bottom: 60px;padding-right: 60px;padding-left: 60px;">
        <div id="pushmesage" class="myalex"> </div>
    </div>
    <div class="layui-row juzhong alex-fontsize" style="padding-top: 40px;padding-bottom: 10px;">
        <button id="alex-current-data" type="button" class="layui-btn-lg layui-btn alex-now-data alex-button">实时数据</button>
    </div>
    <div class="layui-row juzhong alex-fontsize" style="margin-top: 60px;padding-bottom: 20px;padding-right: 60px;padding-left: 60px;">
        <div id="current-now-data">
            点击【实时数据】按钮获取最新站点数据...
        </div>
    </div>
    <div class="layui-row juzhong alex-display-block alex-display-set alex-fontsize" style="margin-top: 50px;padding-bottom: 30px;">
        <button id="alex-copy-current" type="button" class="layui-btn-lg layui-btn alex-current-datacopy alex-button">复  制</button>
    </div>

    <div class="layui-row juzhong alex-fontsize" style="padding-top: 40px;padding-bottom: 10px;">
        <button id="alex-current-data-x20" type="button" class="layui-btn-lg layui-btn alex-now-data alex-button">昨晚8点至今</button>
    </div>
    <div class="layui-row juzhong alex-fontsize" style="margin-top: 60px;padding-bottom: 20px;padding-right: 60px;padding-left: 60px;">
        <div id="current-now-data-x20">
            点击【昨晚8点至今】按钮获取最新站点数据...
        </div>
    </div>
    <div class="layui-row juzhong alex-display-block alex-display-set-x20 alex-fontsize" style="margin-top: 50px;padding-bottom: 30px;">
        <button id="alex-copy-current-x20" type="button" class="layui-btn-lg layui-btn alex-current-datacopy-x20 alex-button">复  制</button>
    </div>

    <div class="layui-row juzhong alex-fontsize" style="padding-top: 40px;padding-bottom: 10px;">
        <button id="alex-current-data-x21" type="button" class="layui-btn-lg layui-btn alex-now-data alex-button">最近1小时</button>
    </div>
    <div class="layui-row juzhong alex-fontsize" style="margin-top: 60px;padding-bottom: 20px;padding-right: 60px;padding-left: 60px;">
        <div id="current-now-data-x21">
            点击【最近1小时】按钮获取最新站点数据...
        </div>
    </div>
    <div class="layui-row juzhong alex-display-block alex-display-set-x21 alex-fontsize" style="margin-top: 50px;padding-bottom: 30px;">
        <button id="alex-copy-current-x21" type="button" class="layui-btn-lg layui-btn alex-current-datacopy-x21 alex-button">复  制</button>
    </div>
    <div class="layui-row juzhong alex-fontsize" style="padding-top: 40px;padding-bottom: 10px;">
        <button id="alex-current-data-x22" type="button" class="layui-btn-lg layui-btn alex-now-data alex-button">一键处理微信预警推送</button>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function () {
        $.ajax({
            url : 'byalex/shitljydata',
            type : 'POST',
            data : {},
            dataType : 'json',
            cache : false,
            success : function(data) {
                if (data.res){
                    if (data.res == "暂时还没有数据"){
                        $("#pushmesage").text(data.res);
                    }else {
                        $("#pushmesage").text(data.res);
                        $("#pushmesage").css({'color': '#2b72de'});
                    }
                }
            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {

            }
        });

        $("#alex-current-data").click(function () {
            $.ajax({
                url : 'byalex/alexnowdata',
                type : 'POST',
                data : {},
                dataType : 'json',
                cache : false,
                success : function(data) {
                    if (data.res){
                        $("#current-now-data").text(data.res);
                        $("#current-now-data").css({'color': '#de512b'});
                    };
                    var alexdisplay = $(".alex-display-set");
                    if (alexdisplay.hasClass('alex-display-block')){
                        alexdisplay.removeClass('alex-display-block');
                    };
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {

                }
            });
        });

        $("#alex-current-data-x20").click(function () {
            $.ajax({
                url : 'byalex/shitljy',
                type : 'POST',
                data : {},
                dataType : 'json',
                cache : false,
                success : function(data) {
                    if (data.res){
                        $("#current-now-data-x20").text(data.res);
                        $("#current-now-data-x20").css({'color': '#de459c'});
                    };
                    var alexdisplay = $(".alex-display-set-x20");
                    if (alexdisplay.hasClass('alex-display-block')){
                        alexdisplay.removeClass('alex-display-block');
                    };
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {

                }
            });
        });

        $("#alex-current-data-x21").click(function () {
            $.ajax({
                url : 'byalex/shitljyone',
                type : 'POST',
                data : {},
                dataType : 'json',
                cache : false,
                success : function(data) {
                    if (data.res){
                        $("#current-now-data-x21").text(data.res);
                        $("#current-now-data-x21").css({'color': '#de1d56'});
                    };
                    var alexdisplay = $(".alex-display-set-x21");
                    if (alexdisplay.hasClass('alex-display-block')){
                        alexdisplay.removeClass('alex-display-block');
                    };
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {

                }
            });
        });

        $("#alex-current-data-x22").click(function () {
            $.ajax({
                url : 'byalex/handlewechatalarm',
                type : 'POST',
                data : {},
                dataType : 'json',
                cache : false,
                success : function(data) {
                    layer.msg("<lable style='font-size: 2em;line-height: 3.5em;'>"+ data.res +"</lable>", {area:['20em', '9em'], time: 2000, shade: [0.3, '#000', true]});
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg("<lable style='font-size: 2em;line-height: 3.5em;'>"+ data.res +"</lable>", {area:['25em', '9em'], time: 2000, shade: [0.3, '#000', true]});
                }
            });
        });

        layui.use('layer', function () {
            //复制固定时段数据
            $("#alex-copy-data").click(function () {
                var pushtext = $("#pushmesage").text();
                alexcopy(pushtext);
                layer.msg("<lable style='font-size: 2em;line-height: 3.5em;'>复制完成</lable>", {area:['20em', '8em'], time: 2000, shade: [0.3, '#000', true]});
            });

            //复制实时数据
            $("#alex-copy-current").click(function () {
                var pushtext = $("#current-now-data").text();
                alexcopy(pushtext);
                layer.msg("<lable style='font-size: 2em;line-height: 3.5em;'>复制完成</lable>", {area:['20em', '8em'], time: 2000, shade: [0.3, '#000', true]});
            });

            //复制x20实时数据
            $("#alex-copy-current-x20").click(function () {
                var pushtext = $("#current-now-data-x20").text();
                alexcopy(pushtext);
                layer.msg("<lable style='font-size: 2em;line-height: 3.5em;'>复制完成</lable>", {area:['20em', '8em'], time: 2000, shade: [0.3, '#000', true]});
            });
            //复制x21实时数据
            $("#alex-copy-current-x21").click(function () {
                var pushtext = $("#current-now-data-x21").text();
                alexcopy(pushtext);
                layer.msg("<lable style='font-size: 2em;line-height: 3.5em;'>复制完成</lable>", {area:['20em', '8em'], time: 2000, shade: [0.3, '#000', true]});
            });
        });

        //复制粘贴 的方法
        function alexcopy(text) {
            var input = document.createElement('input');
            input.setAttribute('readonly', 'readonly'); // 防止手机上弹出软键盘
            input.setAttribute('value', text);
            document.body.appendChild(input);
            // input.setSelectionRange(0, 9999);
            input.select();
            var res = document.execCommand('copy');
            document.body.removeChild(input);
            return res;
        }

        //通过ajax，在页面加载的时候获取微信分享接口signature，nonceStr，timestamp 和appId
        $.ajax({
            type: "get",
            url: 'byalex/share',
            dataType: "json",
            data:"url="+encodeURIComponent(window.location.href.split('#')[0]),
            success: function (data) {
                wx.config({
                    debug: false,
                    appId: data.appId,
                    timestamp: data.timestamp,
                    nonceStr: data.nonceStr,
                    signature: data.signature,
                    jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareWeibo']
                    // 功能列表，我们要使用JS-SDK的什么功能
                });
                wx.ready(function () {
                    // 获取“分享给朋友”按钮点击状态及自定义分享内容接口
                    wx.updateAppMessageShareData({
                        title: "李家岩水库水雨情实况", // 分享标题
                        desc: "四川恒宣水雨情实况通报，点击查看每日特定时段实况水情及实时水情数据...", // 分享描述
                        link: "http://alex.mynatapp.cc/alex/index.html",//分享点击之后的链接---部署域名
                        imgUrl:'http://alex.mynatapp.cc/alex/cdevlogo.png', // 分享图标---部署域名
                        type: 'link', // 分享类型,music、video或link，不填默认为link
                        success: function () {
                            //成功之后的回调
                        },
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
                        }
                    });

                    //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
                    wx.updateTimelineShareData({
                        title: "李家岩水库水雨情实况", // 分享标题
                        desc: "四川恒宣水雨情实况通报，点击查看每日特定时段实况水情及实时水情数据...", // 分享描述
                        link: "http://alex.mynatapp.cc/alex/index.html",//分享点击之后的链接---部署域名
                        imgUrl:'http://alex.mynatapp.cc/alex/cdevlogo.png', // 分享图标---部署域名
                        type: 'link', // 分享类型,music、video或link，不填默认为link
                        success: function () {
                            //成功之后的回调
                        },
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
                        }
                    });

                    //获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
                    wx.onMenuShareWeibo({
                        title: "李家岩水库水雨情实况", // 分享标题
                        desc: "四川恒宣水雨情实况通报，点击查看每日特定时段实况水情及实时水情数据...", // 分享描述
                        link: "http://alex.mynatapp.cc/alex/index.html",//分享点击之后的链接---部署域名
                        imgUrl:'http://alex.mynatapp.cc/alex/cdevlogo.png', // 分享图标---部署域名
                        type: 'link', // 分享类型,music、video或link，不填默认为link
                        success: function () {
                            // 用户确认分享后执行的回调函数
                        },
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
                        }
                    });
                });
                wx.error(function (res) {
                    //打印错误消息。及把 debug:false,设置为debug:ture就可以直接在网页上看到弹出的错误提示
                    //alert("错误:分享出错！！");
                });
            }
        })

    })
</script>
</html>
